<template>
	<scroll-view scroll-y class="main-container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:bottom="50">
			<!-- 首图 -->
			<view class="goods-image">
				<image v-if="goodsData.mainPic" :src="apiImgPrefix + goodsData.mainPic" class="image" mode="widthFix"></image>
			</view>
			<!-- 属性 -->
			<uni-card margin="0" class="goods-top">
				<view slot="title" class="goods-price">
					<text class="rmb">￥</text>
					<text class="price">{{goodsData.price}}</text>
				</view>
				<view class="uni-body goods-specs">
					<uni-tag :inverted="true" :text="`母：${goodsData.specs_female[0]}两 · ${goodsData.specs_female[1]}只`"
						type="success" class="uni-tag" />
					<uni-tag :inverted="true" :text="`公：${goodsData.specs_male[0]}两 · ${goodsData.specs_male[1]}只`" type="warning"
						class="uni-tag" />
				</view>
				<view slot="actions" class="goods-title">
					{{goodsData.name}}
				</view>
			</uni-card>
			<!-- 详情 -->
			<uni-card margin="0" class="goods-detail">
				<u-divider text="图文详情"></u-divider>
				<scroll-view scroll-y>
					<view v-for="(item, index) in goodsData.detailPic" :key="index">
						<image :lazy-load="true" v-if="item" :src="apiImgPrefix + item" class="image" mode="widthFix"></image>
					</view>
				</scroll-view>
				<!-- 相关推荐 -->
				<u-divider text="相关推荐"></u-divider>
				<u-grid :border="false" col="2">
					<u-grid-item v-for="(item, index) in list" :key="item.id">
						<view class="list-item">
							<view class="image-container" @click="toGoodsDetail(item)">
								<image class="image" :src="apiImgPrefix + item.mainPic" width="100%" mode="widthFix"></image>
							</view>
							<view class="list-info">
								<view class="text" @click="toGoodsDetail(item)">
									<text class="grid-name text">{{item.name}}</text>
									<text class="grid-price text">￥{{item.price}}</text>
								</view>
								<view class="cart-icon">
									<u-icon name="shopping-cart" size="30" color="#ff5a00" @click="wannaBuyThis(item)"></u-icon>
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</uni-card>
		</mescroll-body>
		<!-- 底部商品导航 -->
		<view class="fixed-bottom">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<!-- 添加购物车 -->
		<Add2Cart :goods-data="wannaBuyGoods" ref="add2cart"></Add2Cart>
		<!-- 结算 -->
		<Settlement></Settlement>
	</scroll-view>
</template>

<script>
	import {
		API
	} from '@/config/index.js'
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Add2Cart from "@/components/add2cart/index"
	import Settlement from "@/components/settlement/index"
	import {
		getGoodsList
	} from "@/utils/wx_goods"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			Add2Cart,
			Settlement
		},
		data() {
			return {
				goodsData: {
					detailPic: ["file-1723624299557.jpg", "file-1723624301302.jpg", "file-1723624303039.jpg",
						"file-1723624304900.jpg"
					],
					ent_date: "2024-08-14T08:31:45.000Z",
					id: 25,
					mainPic: "file-1723624297332.jpg",
					mod_date: "2024-08-14T08:31:45.000Z",
					name: "尊享型蟹卡",
					price: "998.00",
					specs_female: ["3.0", 5],
					specs_male: ["4", 5]
				},
				apiImgPrefix: API + '/api/',
				upOption: {
					noMoreSize: 5,
					textNoMore: "-- 没有更多 --",
					toTop: {
						offset: 200
					}
				},
				list: [],
				options: [{
					icon: 'home',
					text: '首页'
				}, {
					icon: 'headphones',
					text: '客服',
					phone: "18211548795"
				}, {
					icon: 'cart',
					text: '购物车',
					info: uni.getStorageSync('cartList').length
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff5a00',
						color: '#fff'
					}
				],
				wannaBuyGoods: {}
			}
		},
		beforeCreate() {
			console.log('cartLoad')
			uni.$off('buyThisConfirm')
			uni.$off('cartSettlement')
		},
		onLoad(option) {
			// this.goodsData = JSON.parse(decodeURIComponent(option.data))
			// console.log(this.goodsData)
		},
		created() {
			uni.$on('refreshSomething', () => {
				this.options[2].info = uni.getStorageSync('cartList').length
			})
		},
		onHide() {
			uni.$off('refreshSomething')
		},
		methods: {
			// 商品跳转详情
			toGoodsDetail(data) {
				uni.navigateTo({
					url: "/pages/goods/detail?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			wannaBuyThis(item) {
				this.wannaBuyGoods = item
				this.$nextTick(() => {
					this.$refs.add2cart.popupOpen()
				})
			},
			// 底部商品导航
			onClick(e) {
				console.log(e)
				switch (e.index) {
					case 0:
						uni.switchTab({
							url: "/pages/goods/index"
						});
						break;
					case 1:
						uni.makePhoneCall({
							phoneNumber: e.content.phone,
							fail: (e) => {
								uni.showToast({
									title: `取消拨打`,
									icon: 'none'
								})
							}
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/cart/index"
						});
						break;
				}
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				// console.log(e)
				if (e.index === 0) {
					this.wannaBuyGoods = this.goodsData
					this.$nextTick(() => {
						this.$refs.add2cart.popupOpen()
					})
				} else {
					// this.$nextTick(() => {
					console.log(e)
					uni.$emit('buyThisConfirm', this.goodsData)
					// })
				}
			},
			/*上拉加载的回调*/
			refreshList(keywords) {
				console.log(keywords, 'keywords');
				this.keywords = keywords
				this.mescroll.resetUpScroll();

			},
			upCallback(page) {
				// console.log("upcallback")
				this.getGoodsListData(page)
			},
			// 获取商品列表
			async getGoodsListData(page) {
				try {
					let res = await getGoodsList();
					// console.log(res)
					if (page.num === 1) {
						this.list = []
					}
					this.list = this.list.concat(res.data)
					this.mescroll.endByPage(1, 1);
				} catch (err) {
					console.log(err, '获取商品列表失败');
					this.mescroll.endErr()
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-container {
		background-color: #f7f7f7;
		padding: 2vw 3vw 70rpx 3vw;
		box-sizing: border-box;
		height: 100vh;

		.flex-row {
			display: flex;
			align-items: center;
		}
	}

	// 主图
	.goods-image {
		width: 100%;
		padding-top: 100%;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;

		.image {
			width: 100% !important;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			object-fit: cover;
		}
	}

	// 销售属性
	/deep/.goods-top {
		border-radius: 20rpx;
		overflow: hidden;

		.uni-card {
			padding: 30rpx 20rpx !important;

			.goods-price {
				display: flex;
				align-items: baseline;
				color: #ff5a00;
				font-weight: bold;
				font-size: 26rpx;

				.price {
					font-size: 42rpx;
				}
			}

			.uni-card__content {
				padding: 20rpx 0 !important;

				.uni-tag {
					margin-right: 10rpx;
				}
			}

			.goods-title {
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	// 详情图
	/deep/.goods-detail {
		border-radius: 20rpx;
		overflow: hidden;

		.uni-card {
			padding: 0 !important;
			margin-top: 20rpx !important;


			.uni-card__content {
				padding: 0 !important;
				// font-size: 0;

				.image {
					width: 100% !important;
					display: block;
					vertical-align: top;
				}
			}

		}
	}

	// 相关推荐
	/deep/ .u-grid {
		margin: auto;
		overflow: hidden !important;
		padding-bottom: 20rpx;

		.u-grid-item {
			padding: 10rpx !important;

			.list-item {
				box-sizing: border-box;
				padding: 6rpx;
				width: 100%;
				border-radius: 10rpx;
				background-color: #efefef;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;

				.image-container {
					width: 100%;
					padding-top: 100%;
					position: relative;
					overflow: hidden;

					.image {
						width: 100% !important;
						height: 100%;
						top: 0;
						left: 0;
						position: absolute;
						object-fit: cover;
					}
				}

				.list-info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 20rpx 10rpx;

					.text {
						display: block;
					}

					.grid-name {
						font-size: 30rpx;
						color: #333;
						line-height: 1.5;
						padding: 10rpx 0;
					}

					.grid-price {
						font-size: 36rpx;
						font-weight: bold;
						color: #ff5a00;
					}
				}


			}
		}
	}

	// 底部商品导航
	/deep/.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.uni-goods-nav {
			padding: 10rpx 0;
		}
	}
</style>